<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			header{
				height: 36px;
				width: 100%;
				background: skyblue;
				text-align: center;
			}
			header input{
				width: 95%;
				line-height: 30px;
				border:3px solid black;
			}
			section{
				overflow: auto;
				height: calc( 100% - 36px - 50px);
				width:100%;
				background: skyblue;
				-webkit-overflow-scrolling: touch;
			}
			
			footer{
				height: 50px;
				width:100%;
				background: yellow;
			}
			footer ul{
				list-style: none;
				display: flex;
				justify-content: space-between;
				height: 100%;
			}
			footer ul li{
				box-sizing: border-box;
				border: 1px solid black;
				width: 33%;
				height: 100%;
			}
			footer li> a{
				text-align: center;
				display: block;
				width: 100%;
				height: 100%;
				line-height: 50px;
				text-decoration: none;
				color:black;
			}
			footer li:hover{
				background: red;
			}
		</style>
	</head>
	<body>
		<header>
			<input id="bgg" type="text" />
		</header>
		<section>
			<ul>
				<li><a href="http://baidu.com">1</a></li>
				<li><a href="http://baidu.com">2</a></li>
				<li><a href="http://baidu.com">3</a></li>
				<li><a href="http://baidu.com">4</a></li>
				<li><a href="http://baidu.com">5</a></li>
				<li><a href="http://baidu.com">6</a></li>
				<li><a href="http://baidu.com">7</a></li>
				<li><a href="http://baidu.com">8</a></li>
				<li><a href="http://baidu.com">9</a></li>
				<li><a href="http://baidu.com">10</a></li>
				<li><a href="http://baidu.com">11</a></li>
				<li><a href="http://baidu.com">12</a></li>
				<li><a href="http://baidu.com">13</a></li>
				<li><a href="http://baidu.com">14</a></li>
				<li><a href="http://baidu.com">15</a></li>
				<li><a href="http://baidu.com">16</a></li>
				<li><a href="http://baidu.com">17</a></li>
				<li><a href="http://baidu.com">18</a></li>
				<li><a href="http://baidu.com">19</a></li>
				<li><a href="http://baidu.com">20</a></li>
				<li><a href="http://baidu.com">21</a></li>
				<li><a href="http://baidu.com">22</a></li>
				<li><a href="http://baidu.com">23</a></li>
				<li><a href="http://baidu.com">24</a></li>
				<li><a href="http://baidu.com">25</a></li>
				<li><a href="http://baidu.com">26</a></li>
				<li><a href="http://baidu.com">27</a></li>
				<li><a href="http://baidu.com">28</a></li>
				<li><a href="http://baidu.com">29</a></li>
				<li><a href="http://baidu.com">30</a></li>
				<li><a href="http://baidu.com">31</a></li>
				<li><a href="http://baidu.com">32</a></li>
				<li><a href="http://baidu.com">33</a></li>
				<li><a href="http://baidu.com">34</a></li>
				<li><a href="http://baidu.com">35</a></li>
				<li><a href="http://baidu.com">36</a></li>
				<li><a href="http://baidu.com">37</a></li>
				<li><a href="http://baidu.com">38</a></li>
				<li><a href="http://baidu.com">39</a></li>
				<li><a href="http://baidu.com">40</a></li>
				<li><a href="http://baidu.com">41</a></li>
				<li><a href="http://baidu.com">42</a></li>
				<li><a href="http://baidu.com">43</a></li>
				<li><a href="http://baidu.com">44</a></li>
				<li><a href="http://baidu.com">45</a></li>
				<li><a href="http://baidu.com">46</a></li>
				<li><a href="http://baidu.com">47</a></li>
				<li><a href="http://baidu.com">48</a></li>
				<li><a href="http://baidu.com">49</a></li>
				<li><a href="http://baidu.com">50</a></li>
				<li><a href="http://baidu.com">51</a></li>
				<li><a href="http://baidu.com">52</a></li>
				<li><a href="http://baidu.com">53</a></li>
				<li><a href="http://baidu.com">54</a></li>
				<li><a href="http://baidu.com">55</a></li>
				<li><a href="http://baidu.com">56</a></li>
				<li><a href="http://baidu.com">57</a></li>
				<li><a href="http://baidu.com">58</a></li>
				<li><a href="http://baidu.com">59</a></li>
				<li><a href="http://baidu.com">60</a></li>
				<li><a href="http://baidu.com">61</a></li>
				<li><a href="http://baidu.com">62</a></li>
				<li><a href="http://baidu.com">63</a></li>
				<li><a href="http://baidu.com">64</a></li>
				<li><a href="http://baidu.com">65</a></li>
				<li><a href="http://baidu.com">66</a></li>
				<li><a href="http://baidu.com">67</a></li>
				<li><a href="http://baidu.com">68</a></li>
				<li><a href="http://baidu.com">69</a></li>
				<li><a href="http://baidu.com">70</a></li>
				<li><a href="http://baidu.com">71</a></li>
				<li><a href="http://baidu.com">72</a></li>
				<li><a href="http://baidu.com">73</a></li>
				<li><a href="http://baidu.com">74</a></li>
				<li><a href="http://baidu.com">75</a></li>
				<li><a href="http://baidu.com">76</a></li>
				<li><a href="http://baidu.com">77</a></li>
				<li><a href="http://baidu.com">78</a></li>
				<li><a href="http://baidu.com">79</a></li>
				<li><a href="http://baidu.com">80</a></li>
				<li><a href="http://baidu.com">81</a></li>
				<li><a href="http://baidu.com">82</a></li>
				<li><a href="http://baidu.com">83</a></li>
				<li><a href="http://baidu.com">84</a></li>
				<li><a href="http://baidu.com">85</a></li>
				<li><a href="http://baidu.com">86</a></li>
				<li><a href="http://baidu.com">87</a></li>
				<li><a href="http://baidu.com">88</a></li>
				<li><a href="http://baidu.com">89</a></li>
				<li><a href="http://baidu.com">90</a></li>
				<li><a href="http://baidu.com">91</a></li>
				<li><a href="http://baidu.com">92</a></li>
				<li><a href="http://baidu.com">93</a></li>
				<li><a href="http://baidu.com">94</a></li>
				<li><a href="http://baidu.com">95</a></li>
				<li><a href="http://baidu.com">96</a></li>
				<li><a href="http://baidu.com">97</a></li>
				<li><a href="http://baidu.com">98</a></li>
				<li><a href="http://baidu.com">99</a></li>
				<li><a href="http://baidu.com">100</a></li>
			</ul>
		</section>
		<footer>
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="2.html">方法二</a></li>
				<li><a href="#3">个人中心</a></li>
			</ul>
		</footer>
		
		<script src="js/vconsole.js"></script>
		<script>
		
//			document.body.style.height = document.body.clientHeight+"px";
			document.body.style.height = window.innerHeight+"px";
			alert(document.body.style.height);
			console.log("当前的body高度:"+document.body.clientHeight);
		</script>
	</body>
</html>